<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="更多房源" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body">
			<view class="">
				<!-- <u-dropdown activeColor="#0d515c">
					<u-dropdown-item v-model="value1" title="租金">
						<view class="slot-content" style="width:100%;background-color: #f8f8f8;">
							<text class="dis_blo zujin"  v-for="(item,index) in options1" :key="index" :style="[{background:value1==item.value ? '#e5f2f3':'',color:value1==item.value?'#000':'#333'}]" @click="toselectprice(item.value)">{{item.label}}</text>
							<view class="btn_intro">
								<view class="left_icon">
									<view class="dis_inl_blo">
										<u-icon size="30" name="https://resourse.cnlhjt.com/upload/20221227/75151234b6480eb3e1073073466933fa.png">
										</u-icon>
									</view>
									
									<text class="dis_blo">重置</text>
								</view>
								<view class="btn">查看房源</view>
							</view>
						</view>
					</u-dropdown-item>
					<u-dropdown-item v-model="value2" title="户型" :options="options2">
						<view class="slot-content" style="width:100%;background-color: #f8f8f8;">
							<view style="height: 220px;overflow-y: scroll;display: flex;">
								<view class="housetype_left">
									
									<text v-for="(item,index) in typeall" :class="housetypevalue==item.id ?'active':''"  :key="index" @click="housetypeclick(item.id)">{{item.name}}</text>
								</view>
								<view class="housetype_right">
									<view style="height:60rpx;line-height: 60rpx;">居室</view>
									<view style="margin:10rpx 0;">
										<text class="room_type" v-for="(item,index) in room" :key="index">{{item.name}}</text>
									</view>
									<view style="height:60rpx;line-height: 60rpx;">朝向</view>
									<view style="margin:10rpx 0;">
										<text class="room_type" v-for="(item,index) in direction" :key="index">{{item.name}}</text>
									</view>
									<view style="height:60rpx;line-height: 60rpx;">面积</view>
									<view style="margin:10rpx 0;">
										<text class="room_type" v-for="(item,index) in arealist" :key="index">{{item.name}}</text>
									</view>
								</view>
							</view>
							<view class="btn_intro">
								<view class="left_icon">
									<view class="dis_inl_blo">
										<u-icon size="30" name="https://resourse.cnlhjt.com/upload/20221227/75151234b6480eb3e1073073466933fa.png">
										</u-icon>
									</view>
									
									<text class="dis_blo">重置</text>
								</view>
								<view class="btn">查看房源</view>
							</view>
						</view>
					</u-dropdown-item>
					<u-dropdown-item v-model="value2" title="筛选">
						<view class="slot-content" style="width:100%;background-color: #f8f8f8;">
							<view style="height: 220px;overflow-y: scroll;">
								<view class="housetype_right">
									<view style="height:60rpx;line-height: 60rpx;">验真情况</view>
									<view style="margin:10rpx 0;">
										<text class="room_type" v-for="(item,index) in truelist" :key="index">{{item.name}}</text>
									</view>
									<view style="height:60rpx;line-height: 60rpx;">来源</view>
									<view style="margin:10rpx 0;">
										<text class="room_type" v-for="(item,index) in resource" :key="index">{{item.name}}</text>
									</view>
									<view style="height:60rpx;line-height: 60rpx;">设施</view>
									<view style="margin:10rpx 0;">
										<text class="room_type" v-for="(item,index) in facility" :key="index">{{item.name}}</text>
									</view>
								</view>
							</view>
							<view class="btn_intro">
								<view class="left_icon">
									<view class="dis_inl_blo">
										<u-icon size="30" name="https://resourse.cnlhjt.com/upload/20221227/75151234b6480eb3e1073073466933fa.png">
										</u-icon>
									</view>
									
									<text class="dis_blo">重置</text>
								</view>
								<view class="btn">查看房源</view>
							</view>
						</view>
					</u-dropdown-item>
					<u-dropdown-item v-model="value4" title="排序">
						<view class="slot-content" style="width:100%;background-color: #f8f8f8;">
							<view style="height: 220px;overflow-y: scroll;">
								<text class="dis_blo zujin"  v-for="(item,index) in options4" :key="index" :style="[{background:value4==item.value ? '#e5f2f3':'',color:value4==item.value?'#000':'#333'}]" @click="toselecttype(item.value)">{{item.label}}</text>
							</view>
							
							<view class="btn_intro">
								<view class="left_icon">
									<view class="dis_inl_blo">
										<u-icon size="30" name="https://resourse.cnlhjt.com/upload/20221227/75151234b6480eb3e1073073466933fa.png">
										</u-icon>
									</view>
									
									<text class="dis_blo">重置</text>
								</view>
								<view class="btn">查看房源</view>
							</view>
						</view>
					</u-dropdown-item>
				</u-dropdown> -->
			</view>
			<view>
				<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
				<view class="house_list" v-for="(item,index) in houselist" :key="index" @click="todetail(item.id)">
					<image class="house_img" :src="item.images_[0]" mode="aspectFill"></image>
					<view class="house_right_con">
						<view class="overflow">{{item.rent_type_label}} | {{item.title}}</view>
						<view class="second_con">
							{{item.area}}㎡ · {{item.arrow_type_label}} · {{item.address}}
						</view>
						<view class="house_label">
							<text>{{item.rent_type_label}}</text>
							<text>{{item.renovation_type_label}}</text>
							<text>{{item.arrow_type_label}}</text>
						</view>
						<view class="house_price">
							<text style="font-size: 32rpx;font-weight: bold;">{{item.price}}</text>元/月
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		rentList
	} from "@/service/rentService.js";
	export default {
		data(){
			return {
				value1: 1,
				value2: 2,
				value4:1,
				
				options1: [{
						label: '不限',
						value: 1,
					},
					{
						label: '≤2000元',
						value: 2,
					},
					{
						label: '2000~3000元',
						value: 3,
					},
					{
						label: '3000~5000元',
						value: 4,
					},
					{
						label: '5000~8000元',
						value: 5,
					},
					{
						label: '≥8000元',
						value: 6,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				options4:[
					{
						label:'最新发布',
						value:1
					},
					{
						label:'价格（从低到高）',
						value:2
					},
					{
						label:'价格（从高到底）',
						value:3
					},
					{
						label:'面积（从小到大）',
						value:4
					},
					{
						label:'面积（从大到小）',
						value:5
					}
				],
				housetypevalue:1,
				typeall:[
					{
						id:1,
						name:'整租'
					},
					{
						id:2,
						name:'合租'
					}
				],
				room:[
					{
						id:1,
						name:'不限',
					},
					{
						id:2,
						name:'1居',
					},
					{
						id:3,
						name:'2居',
					},
					{
						id:4,
						name:'3居',
					},
					{
						id:5,
						name:'4居',
					},
					{
						id:6,
						name:'4居以上',
					}
				],
				direction:[
					{
						id:1,
						name:'东'
					},
					{
						id:2,
						name:'南'
					},
					{
						id:3,
						name:'西'
					},
					{
						id:4,
						name:'北'
					},
					{
						id:5,
						name:'东南'
					},
					{
						id:6,
						name:'西北'
					}
				],
				
				arealist:[
					{
						id:1,
						name:'≤30㎡'
					},
					{
						id:2,
						name:'30-50㎡'
					},
					{
						id:3,
						name:'50-80㎡'
					},
					{
						id:4,
						name:'80-120㎡'
					},
					{
						id:5,
						name:'120-150㎡'
					},
					{
						id:6,
						name:'150㎡以上'
					}
				],
				truelist:[
					{
						id:1,
						name:'不限'
					},
					{
						id:2,
						name:'安选'
					},
					{
						id:3,
						name:'核验真房'
					}
				],
				resource:[
					{
						id:1,
						name:'不限'
					},
					{
						id:2,
						name:'个人房源'
					},
					{
						id:3,
						name:'房产经纪'
					}
				],
				facility:[
					{
						id:1,
						name:'集中供暖'
					},
					{
						id:2,
						name:'民水民电'
					},
					{
						id:3,
						name:'洗衣机'
					},
					{
						id:4,
						name:'厨房厨具'
					},
					{
						id:5,
						name:'wifi连线'
					},
					{
						id:6,
						name:'防盗门窗'
					}
					
				],
				
				type:0,
				showEmpty:false,
				page: 1,
				limit: 10,
				houselist:[]
			}
		},
		onLoad(options) {
			this.type=options.i;
			rentList({
				type:options.i,
				page: this.page,
				limit: this.limit
			}).then(this.rentList);
		},
		onReachBottom() {
			rentList({
				type:this.type,
				page: this.page,
				limit: this.limit
			}).then(res=>{
				if(res.code==200){
					if(res.result.length==0){
						this.$refs.uToast.show({
							type: 'error',
							title: '没有更多啦',
							icon:false
							// message: e.msg,
						})
					}else{
						let list = res.result;
						list.forEach((item) => {
							this.houselist.push(item);
						})
						this.page++;
					}
					
				}else {
					this.$refs.uToast.show({
						type: 'error',
						title: '没有更多啦',
						icon:false
					})
				}
			});
		},
		methods:{
			toselectprice(value){
				this.value1=value;
			},
			toselecttype(value){
				this.value4=value;
			},
			housetypeclick(id){
				this.housetypevalue=id;
			},
			rentList(e){
				if (e.code == 200) {
					this.houselist = e.result;
					if(e.result.length==0){
						this.showEmpty = true;
					}else{
						this.showEmpty = false;
					}
				} else {
					this.showEmpty = true;
					this.houselist = [];
				}
			},
			todetail(id){
				this.$u.route({
					url: '/pagesHome/houseRent/houseDetail',
					params: {
						id:id
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.zujin{
		text-align: center !important;padding:15rpx 0;font-size: 28rpx;
		color:#333;
	}
	.btn_intro{
		display: flex;
		text-align: center;
		padding:20rpx 0;
		margin-top:15rpx;
		background-color: #fff;
		.left_icon{
			width:20%;
			font-size: 26rpx;
		}
		.btn{
			width:75%;
			height:80rpx;
			color:#fff;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-image:linear-gradient(to right,#008189,#0d515c);
		}
	}
	
	.housetype_left{
		width:15%;
		text-align: center;
		background-color: #eee;
		text{
			display: block;
			height:60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
		}
		.active{
			background-color: #f8f8f8;
			font-size: 30rpx;
		}
		.active::before{
			content:'|';
			width:8rpx;
			height:40rpx;
			color:transparent;
			background-color: #00828a;
			float:left;
			margin-top:10rpx;
			border-radius: 4rpx;
		}
	}
	
	.housetype_right{
		padding:0 20rpx;
		width:85%;
		background-color: #f8f8f8;
		.room_type{
			display: inline-block;
			color:#333;
			font-size: 24rpx;
			padding:5rpx 15rpx;
			border-radius: 10rpx;
			margin-right:15rpx;
			margin-bottom:10rpx;
			background-color: #fff;
		}
	}
	
	.house_list{
		padding:20rpx;
		display: flex;
		border-top:1rpx solid #ddd;
		.house_img{
			width:30%;
			height:190rpx;
			margin-right:20rpx;
			border-radius: 15rpx;
		}
		.house_right_con{
			position: relative;
			width:67%;
			.second_con{
				margin:10rpx 0;
				font-size: 22rpx;
			}
			.house_label text{
				font-size: 22rpx;
				color:#666;
				padding:3rpx 8rpx;
				border:1rpx solid #999;
				border-radius: 8rpx;
				margin-right:10rpx;
			}
			.house_label text:first-child{
				color:#fff;
				background-image: linear-gradient(to right,#5baeb4,#07858d);
				border:1rpx solid transparent;
			}
			.house_price{
				position: absolute;
				bottom:0;
				color:red;
				font-size: 24rpx;
			}
		}
	}
</style>